<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 
        搜索和排序被放在一起思考了，思路是：
        // 1. 现提出（搜索范围）内的数据，存到一个计算属性(filterStuScoreData)内
        // 2. 使用上面得到的计算属性(filterStuScoreData)，按单选按钮的值对得到的计算属性内的数据进行排序，
              再存放置一个新的计算属性(afterSortStuScoreData)

        1.单选按钮 v-model使用 注意联合value
        2.class绑定注意写 {} 
        3.class绑定中 xxx=='xxx' 注意引号 字符串格式
     -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>成绩排序重复练习</title>
    <style>
        table{
            border-collapse: collapse;
        }
        table th,td{
            padding: 10px 20px;
        }
        .sortCourseStyle{
            color: tomato;
            background-color: lightgray;
            /* 动画效果 */
            transform: scale(1.2);
            transition: all 1s ease;
        }
    </style>
</head>
<body>
    <div id="app">

        <div id="searchBar">
            搜索：
            <input type="text" v-model.lazy="minScore">
            &nbsp; ~ &nbsp;
            <input type="text" v-model.lazy="maxScore">
        </div>
        <br>
        <div id="sortType">
            排名方式：
            <!-- 1.单选按钮 v-model使用 注意联合value -->
            <input type="radio" name="sortType" value="math" v-model="currentSortCourseName" id="math"><label for="math">math</label>
            <input type="radio" name="sortType" value="chinese" v-model="currentSortCourseName" id="chinese"><label for="chinese">chinese</label>
            <input type="radio" name="sortType" value="english" v-model="currentSortCourseName" id="english"><label for="english">english</label>
            <input type="radio" name="sortType" value="totalScore" v-model="currentSortCourseName" id="totalScore"><label for="totalScore">totalScore</label>
        </div>
        <p>{{currentSortCourseName}}</p>

        <br>
        <div id="scoreInfoTable">
            <table>
                <tr>
                    <th>排序</th>
                    <th>姓名</th>
                    <th>数学</th>
                    <th>语文</th>
                    <th>英语</th>
                    <th>总分</th>
                </tr>

                <tr v-if="afterSortStuScoreData.length==0">
                    <th colspan="6" style="text-align:center">无满足所选条件的学生信息</th>
                </tr>

                <tr v-else v-for="(item,index) in afterSortStuScoreData" :key="index">
                    <!-- 排序始终从第一名开始，故直接index+1 -->
                    <td>{{index+1}}</td>
                    <td>{{item.name}}</td>
                    <!-- 2.class绑定注意写 {}  -->
                    <!-- 3.class绑定中 xxx=='xxx' 注意引号 字符串格式 -->
                    <td :class="{sortCourseStyle:currentSortCourseName=='math'}">{{item.math}}</td>
                    <td :class="{sortCourseStyle:currentSortCourseName=='chinese'}">{{item.chinese}}</td>
                    <td :class="{sortCourseStyle:currentSortCourseName=='english'}">{{item.english}}</td>
                    <!-- 传参使用总分计算属性！！ -->
                    <td :class="{sortCourseStyle:currentSortCourseName=='totalScore'}">{{scoreTotalCount(item)}}</td>
                </tr>
            </table>
        </div>

    </div>

    <script src="vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            data(){
                return {
                    // search use
                    minScore:"0",
                    maxScore:"300",

                    // sort use
                    currentSortCourseName:"totalScore",

                    stuScoreInfo:[
                        
                        {name:"bbb", math:90, chinese:30, english:20 },
                        {name:"aaa", math:100, chinese:90, english:30 },
                        {name:"fff", math:50, chinese:100, english:90 },
                        {name:"ddd", math:70, chinese:50, english:100 },
                        {name:"ccc", math:80, chinese:70, english:50 },
                        {name:"ggg", math:10, chinese:80, english:70 },
                        {name:"hhh", math:40, chinese:10, english:80 },
                        {name:"eee", math:60, chinese:40, english:10 },
                        {name:"ooo", math:20, chinese:60, english:40 },
                        {name:"xxx", math:30, chinese:20, english:60 },
                        

                    ]
                }
            },
            methods:{},
            computed:{
                // 总分计算-思路死记先-（传参数使用原理还不理解！！）
                scoreTotalCount(){
                    return function(item){
                        return item.math+item.chinese+item.english;
                    }
                },

                // 范围值过滤
                // 注意要分成 总分 与 其他课 两项来过滤
                filterStuScoseData(){
                    // !!!!!拓展-此处箭头函数不用{}时，无需写return，用时要写
                    return this.stuScoreInfo.filter(item=>{ 
                        if(this.currentSortCourseName=="totalScore"){
                            return this.scoreTotalCount(item) >= this.minScore && this.scoreTotalCount(item) <= this.maxScore;
                        };
                        // 访问现在所选的课程名称 item[this.currentSortCourseName] 
                        return item[this.currentSortCourseName] >= this.minScore && item[this.currentSortCourseName] <= this.maxScore;
                    })
                },

                // 排序过滤
                afterSortStuScoreData(){
                    return this.filterStuScoseData.sort((a,b) => {
                        if(this.currentSortCourseName=="totalScore"){
                            return this.scoreTotalCount(b) - this.scoreTotalCount(a);
                        };
                        // 访问现在所选的课程名称 item[this.currentSortCourseName] 
                        return b[this.currentSortCourseName] - a[this.currentSortCourseName];
                    })
                },
            },
            watch:{}
        })
    </script>
</body>
</html>